import React, { useEffect, useState } from "react"
import styles from "./rankList.less"
import { Table } from "antd"
import { getRankList, getRanksList } from '@/services/index'
// import useStore from "@/context/useStore"

import { IStationRankList } from "@/utils/interface"


const status = ["全部", "网站2021班"]

const columns = [
    {
        title: "排名",
        dataIndex: "rangking",
        key:"排名"
    },
    {
        title: "提交人",
        dataIndex: "commitName",
        key:"提交人"
    },
    {
        title: "面试记录提交数",
        dataIndex: "count",
        key:"面试记录提交数"
    },
    {
        title: "班级",
        dataIndex: "className",
        key:"班级"
    },
    {
        title: "专业",
        dataIndex: "majorName",
        key:"专业"
    }
]

const StatusTitle = ["面试记录榜单","面试题榜单"]

const RankList: React.FC = () => {

    let [dataSource_one, setDataSource_one] = useState<IStationRankList[]>([])
    
    let [rankList, setRankList] = useState(0)
    let [rankListCars, setRankListCars] = useState(0)

    

    useEffect(() => {
        
    }, [])

    // let {getrank}=useStore()
    useEffect(() => {
        if(rankListCars === 1){
            getRankList().then(res => {
                console.log(res.rows)
                if (res.code == 200) {
                    setDataSource_one(res.rows)
                }
            })
        }else if(rankListCars === 0){
            getRanksList().then(res => {
                // console.log(res.rows)
                if (res.code == 200) {
                    setDataSource_one(res.rows)
                }
            })
        }
        
    }, [rankListCars])

    return <div className={styles.ranklist}>
        <section className={styles.rank_h2}>
            <h3>班级：{
                    status.map((item, index) => {
                        return <span onClick={e => setRankList(index)} key={index} className={index === rankList ? styles.active : ""}>{item}</span>
                    })
                }<ul>
            </ul></h3>
        </section>
        <div className={styles.Table}>
            <h1 className={styles.rank_h1}>{
                    StatusTitle.map((item, index) => {
                        return <span onClick={e => {
                            setRankListCars(index)
                        }} key={index} className={index === rankListCars ? styles.actives : ""}>{item}</span>
                    })
                }</h1>
            <Table rowKey='rangking' dataSource={dataSource_one} columns={columns} />
        </div>
    </div>
}

export default RankList